<template>
	<div class="minenav">
		<ul>
			<li v-for="(v,i) in this.$store.state.minenav" :key="i">
				<span :class="v.class"></span>
				<h4>{{v.title}}</h4>
				<p>{{v.page}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		mounted() {
			this.$store.dispatch("minenavaxios")
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.minenav{
		ul{
			
			width: calc(100% - 0.3rem);
			padding: 0.1rem 0.15rem 0.15rem;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			background-color: #FFFFFF;
			margin-top: 0.05rem;
			li{
				width: 25%;
				height: 0.9rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				span{
					margin-top: 0.14rem;
					font-size: 0.22rem;
				}
				h4{
					font-size: 0.14rem;
					margin-top: 0.08rem;
					font-weight: normal;
				}
				p{
					font-size: 0.12rem;
					color: #b5b5b5;
				}
			}
		}
	}
</style>
